<template>
	<view class="avaluate" :style="{height: orderHeight+'px'}">
		<view class="valuebox">
			<view class="Img">
				<image class="mt-4" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/index/dpy@2x.png" mode=""></image>
			</view>
			<view class="font">
				您的评分很重要，是我们不断提高服务的动力，满意请给五星好评哦～
			</view>
			<view class="example-body ml-2">
				<uni-rate size="23" :margin="5" active-color="#FF8338" :value="rateValue"  @change="onChange"/>
			</view>
			<view class="writevalue">
				<textarea v-model="content" style="width: 560rpx;height: 200rpx;font-size: 29rpx;" value="" placeholder="对陪诊员的服务满意吗？说说您的感受吧~" />
				<view class="box d-f-wrap" @tap="choosephoto">
					<view class="" v-for="(item,index) in pushImageUrl">
						<image class="photo m-1" v-if="image!=''" :src="item" mode=""></image>
					</view>
					<image class="photo m-1" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/chuanzhaopian@2x.png" mode=""></image>
					
				</view>
			</view>
		</view>
		<view class="btn" @tap="sure">
			提交评价
		</view>
	</view>
</template>

<script>
	import unirate from "@/components/uni-rate/uni-rate.vue";
	export default {
		data() {
			return {
				rateValue:1,
				Height:400,
				orderNo:'',
				content:"",
				image:'',
				imageUrl:'',
				pushImageUrl:[]
			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.Height = res.windowHeight - uni.upx2px(60) //windoHeight为窗口高度，主要使用的是这个
				}
			})
		},
		onLoad(option) {
			this.orderNo = option.orderNo
		},
		methods: {
			choosephoto(){
				let _this = this
				let url = 'https://app.xiangban365.com/app_mobile/upload/file'
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						_this.imageUrl = _this.imageUrl.concat(res.tempFilePaths);
						uni.uploadFile({
							url: url, //仅为示例，非真实的接口地址
							// url: "http://111.229.135.6:8001/upload/file", //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
							},
							success: function(uploadFileRes) {
								let data = JSON.parse(uploadFileRes.data)
								console.log(data.dataMap)
								_this.image = data.dataMap
								_this.pushImageUrl = _this.pushImageUrl.concat(_this.image);
								console.log("------" + _this.pushImageUrl)
							}
						});
				
					},
					fail: err => {
						console.log('选择图片失败！')
						console.log(JSON.stringify(err))
					}
				});
			},
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				this.rateValue = e.value
			},
			sure(){
				this.$api.orderevaluate ({
					orderNo:this.orderNo,
					content:this.content,
					images :JSON.stringify(this.pushImageUrl),
					grade:this.rateValue,
				}).then((res) => {
					if(res.data.code=200){
						console.log(res.data.dataMap)
						uni.showToast({
						    title: '提交成功',
						    duration: 2000,
							icon:'none'
						});
						uni.navigateBack({
							delta:1
						})
					}
							
				})
			},
			
		},
	}
</script>

<style lang="less" scoped>
.avaluate{
	background: #F2F7FF;
	padding: 30rpx;
}
.valuebox{
	width: 690rpx;
	// height: 800rpx;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding-bottom: 20rpx;
	.Img{
		text-align: center;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
	.font{
		width: 515rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		margin: 0 auto;
		margin-top: 15rpx;
		text-align: center;
	}
	.example-body{
		width: 250rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	.writevalue{
		width: 560rpx;
		// height: 380rpx;
		background: #F7F6F5;
		border-radius: 12rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		padding: 30rpx;
	}
	.photo{
		width: 160rpx;
		height: 160rpx;
	}
}
.btn{
	margin-top: 240rpx;
	width: 690rpx;
	height: 100rpx;
	background: #FF8338;
	border-radius: 50rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 100rpx;
	text-align: center;
}
</style>
